@use "@/common/styles/colors"

.server-dialog
  display: flex
  flex-direction: column
  gap: 1rem
  user-select: none
  width: 28rem

  .text-center
    text-align: center

  .server-dialog-content
    display: flex
    flex-direction: column
    gap: 0.5rem

  .name-row
    display: grid
    grid-template-columns: 4fr 1fr
    gap: 1rem

  .address-row
    display: grid
    grid-template-columns: 1fr auto
    gap: 1rem

  .pve-config-row
    display: grid
    grid-template-columns: 1fr auto
    gap: 1rem

  .password-row
    width: 100%

  .keyfile-row
    display: flex
    gap: 1rem

    input[type="file"]
      cursor: pointer

    input[type="file"]::-webkit-file-upload-button
      display: none


  .form-group
    display: flex
    flex-direction: column
    gap: 0.3rem

    label
      color: colors.$subtext
      font-weight: 600

    .small-input
      padding: 0.8rem
      width: 4rem
      border: 1px solid colors.$gray
      background-color: colors.$dark-gray
      color: colors.$light-gray
      border-radius: 0.5rem
      font-size: 14pt
      outline: none

      &:focus
        border: 1px solid colors.$primary
        background-color: colors.$gray

  .server-dialog-title
    h2
      font-size: 1.3rem
      margin: 0
      font-weight: 700
      color: colors.$white


  .server-dialog-tabs
    display: flex
    gap: 1rem

  .tabs-item
    padding: 0.5rem 1rem
    border-bottom: 2px solid transparent
    cursor: pointer
    border-radius: 0.5rem
    transition: all 0.2s ease

    h3
      margin: 0
      font-weight: 600
      font-size: 0.95rem

    &:hover
      background-color: colors.$darker-gray

  .tabs-item-active
    background-color: colors.$gray
    border-bottom: 2px solid colors.$primary
    border-radius: 0.5rem 0.5rem 0 0

    &:hover
      background-color: colors.$gray

  .identities
    display: flex
    flex-direction: column
    gap: 1rem

    .identities-header
      display: flex
      justify-content: space-between
      align-items: center
      margin-bottom: 0.5rem

      h3
        margin: 0
        color: colors.$white

      .identity-actions
        .add-identity-btn
          padding: 0.5rem 1rem
          font-size: 0.9rem

    .link-identity-section
      background-color: colors.$darker-gray
      border: 1px solid colors.$gray
      border-radius: 0.5rem
      padding: 1rem
      margin-bottom: 1rem

      .link-identity-row
        display: flex
        gap: 1rem
        align-items: end

        .form-group
          flex: 1

        .link-identity-btn
          padding: 0.75rem 1.5rem
          font-size: 0.9rem

          &:disabled
            opacity: 0.5
            cursor: not-allowed

    .no-identities
      text-align: center
      padding: 2rem
      color: colors.$subtext
      border: 2px dashed colors.$gray
      border-radius: 0.5rem

  .identity
    background-color: colors.$dark-gray
    border: 1px solid colors.$gray
    padding: 1rem
    border-radius: 0.5rem
    display: flex
    flex-direction: column
    gap: 1rem

    .identity-header
      display: flex
      justify-content: space-between
      align-items: center
      gap: 1rem

      .unlink-identity-btn
        background: none
        border: 1px solid colors.$gray
        border-radius: 0.375rem
        padding: 0.5rem
        cursor: pointer
        color: colors.$light-gray
        transition: all 0.2s
        display: flex
        align-items: center
        justify-content: center
        min-width: 2rem
        height: 2rem

        &:hover
          background-color: colors.$error
          border-color: colors.$error
          color: colors.$white

        svg
          width: 0.8rem
          height: 0.8rem

    .keyfile-status
      display: flex
      align-items: center
      gap: 0.5rem
      margin-top: 0.5rem
      color: colors.$success

      svg
        width: 1rem
        height: 1rem

      span
        font-size: 0.9rem

  .monitoring-toggle-container
    display: flex
    justify-content: flex-start
    align-items: center
    gap: 1rem
    padding: 1rem
    background-color: colors.$dark-gray
    border: 1px solid colors.$gray
    border-radius: 0.5rem

    .monitoring-toggle-info
      display: flex
      flex-direction: column
      gap: 0.25rem
      flex: 1

      .monitoring-label
        font-weight: 600
        color: colors.$white

      .monitoring-description
        font-size: 0.9rem
        color: colors.$subtext

  .keyboard-layout-card
    background-color: colors.$dark-gray
    border: 1px solid colors.$gray
    padding: 1rem
    border-radius: 0.5rem

    .keyboard-layout-description
      font-size: 0.9rem
      color: colors.$subtext
      margin-top: 0.5rem
      margin-bottom: 0